<template>
  <div class="auth-container">
    <!-- 背景粒子系统 -->
    <div class="particle-background">
      <canvas ref="particleCanvas" class="particle-canvas"></canvas>
    </div>

    <!-- 主要内容区域 -->
    <div class="auth-content">
      <!-- 左侧表单区域 -->
      <div class="form-section">
        <!-- AI品牌标识 -->
        <div class="brand-header">
          <div class="ai-logo" :class="{ 'nodding': loading }">
            <svg viewBox="0 0 100 100" class="neural-network-icon">
              <g class="network-nodes">
                <circle cx="20" cy="30" r="3" class="node" />
                <circle cx="20" cy="50" r="3" class="node" />
                <circle cx="20" cy="70" r="3" class="node" />
                <circle cx="50" cy="25" r="3" class="node" />
                <circle cx="50" cy="50" r="3" class="node" />
                <circle cx="50" cy="75" r="3" class="node" />
                <circle cx="80" cy="40" r="3" class="node" />
                <circle cx="80" cy="60" r="3" class="node" />
              </g>
              <g class="network-connections">
                <line x1="20" y1="30" x2="50" y2="25" class="connection" />
                <line x1="20" y1="50" x2="50" y2="25" class="connection" />
                <line x1="20" y1="50" x2="50" y2="50" class="connection" />
                <line x1="20" y1="70" x2="50" y2="75" class="connection" />
                <line x1="50" y1="25" x2="80" y2="40" class="connection" />
                <line x1="50" y1="50" x2="80" y2="40" class="connection" />
                <line x1="50" y1="50" x2="80" y2="60" class="connection" />
                <line x1="50" y1="75" x2="80" y2="60" class="connection" />
              </g>
            </svg>
          </div>
          <h1 class="brand-title">AI代码平台</h1>
          <p class="brand-subtitle">释放人工智能编程超能力</p>
        </div>

        <!-- 表单区域 -->
        <div class="auth-form" :class="{ 'dissolving': isSuccess }">
          <a-form
            :model="formState"
            name="loginForm"
            :rules="rules"
            @finish="onFinish"
            autocomplete="off"
            layout="vertical"
          >
            <!-- 账号输入 -->
            <a-form-item name="userAccount" label="账号">
              <div class="input-wrapper" :class="{ 'focused': focusedField === 'userAccount' }">
                <a-input 
                  v-model:value="formState.userAccount" 
                  placeholder="请输入账号"
                  @focus="handleFocus('userAccount')"
                  @blur="handleBlur"
                  class="form-input"
                />
                <div class="hologram-keyboard" v-if="focusedField === 'userAccount'"></div>
              </div>
            </a-form-item>

            <!-- 密码输入 -->
            <a-form-item name="userPassword" label="密码">
              <div class="input-wrapper" :class="{ 'focused': focusedField === 'userPassword' }">
                <a-input-password 
                  v-model:value="formState.userPassword" 
                  placeholder="请输入密码"
                  @focus="handleFocus('userPassword')"
                  @blur="handleBlur"
                  class="form-input"
                />
                <div class="hologram-keyboard" v-if="focusedField === 'userPassword'"></div>
                <div class="encryption-particles" v-if="focusedField === 'userPassword'"></div>
              </div>
            </a-form-item>

            <!-- 记住我和忘记密码 -->
            <a-form-item>
              <div class="form-options">
                <label class="remember-me">
                  <input type="checkbox" v-model="rememberMe" class="hidden-checkbox">
                  <div class="brain-icon" :class="{ 'active': rememberMe }">
                    <svg viewBox="0 0 24 24">
                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                  </div>
                  <span>记住登录状态</span>
                </label>

                <a href="#" class="forgot-password" @mouseenter="showEncryptionAnimation">
                  忘记密码？
                  <div class="encryption-animation" v-if="showEncryption"></div>
                </a>
              </div>
            </a-form-item>

            <!-- 登录按钮 -->
            <a-form-item>
              <button 
                type="submit" 
                class="submit-btn"
                :class="{ 'loading': loading }"
                :disabled="loading"
              >
                <span v-if="!loading" class="btn-text">登录</span>
                <div v-else class="quantum-loader">
                  <div class="quantum-ring"></div>
                  <div class="quantum-ring"></div>
                  <div class="quantum-ring"></div>
                  <span class="loading-text">正在验证身份...</span>
                </div>
              </button>
            </a-form-item>

            <!-- 社交登录 -->
            <div class="social-login">
              <div class="divider">
                <span>或使用以下方式</span>
              </div>
              <div class="social-buttons">
                <button type="button" class="social-btn github" @click="socialLogin('github')">
                  <svg viewBox="0 0 24 24">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                  </svg>
                  GitHub
                </button>
                <button type="button" class="social-btn google" @click="socialLogin('google')">
                  <svg viewBox="0 0 24 24">
                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                  </svg>
                  Google
                </button>
                <button type="button" class="social-btn wechat" @click="socialLogin('wechat')">
                  <svg viewBox="0 0 24 24">
                    <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 4.882-1.932 7.621-.55-.302-2.676-2.91-4.624-6.364-4.624zm-2.44 5.738a.868.868 0 0 1-.867-.861.868.868 0 0 1 .867-.867.868.868 0 0 1 .867.867.868.868 0 0 1-.867.861zm5.035 0a.868.868 0 0 1-.867-.861.868.868 0 0 1 .867-.867.868.868 0 0 1 .867.867.868.868 0 0 1-.867.861zm7.129-.405c-3.302 0-5.97 2.267-5.97 5.076 0 1.43.716 2.716 1.845 3.658a.47.47 0 0 1 .171.533l-.312 1.18a.2.2 0 0 0-.038.17c0 .13.104.235.233.235a.26.26 0 0 0 .134-.043l1.517-.888a.69.69 0 0 1 .573-.078c.62.149 1.265.23 1.847.23 3.302 0 5.97-2.267 5.97-5.076s-2.668-5.076-5.97-5.076zm-2.44 3.658a.69.69 0 0 1-.69-.69.69.69 0 0 1 .69-.69.69.69 0 0 1 .69.69.69.69 0 0 1-.69.69zm4.013 0a.69.69 0 0 1-.69-.69.69.69 0 0 1 .69-.69.69.69 0 0 1 .69.69.69.69 0 0 1-.69.69z"/>
                  </svg>
                  微信
                </button>
              </div>
            </div>

            <div class="register-link">
              还没有账号？ <router-link to="/user/register">立即注册</router-link>
            </div>
          </a-form>
        </div>
      </div>

      <!-- 右侧AI助手演示区域 -->
      <div class="demo-section">
        <div class="ai-assistant">
          <div class="assistant-avatar">
            <div class="avatar-glow"></div>
            <div class="avatar-core"></div>
            <div class="pulse-rings">
              <div class="pulse-ring"></div>
              <div class="pulse-ring"></div>
              <div class="pulse-ring"></div>
            </div>
          </div>
          <div class="assistant-dialogue">
            <div class="dialogue-bubble">
              <p>{{ currentDialogue }}</p>
              <div class="typing-indicator" v-if="isTyping">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="feature-showcase">
          <div class="feature-item" v-for="feature in features" :key="feature.id">
            <div class="feature-icon">{{ feature.icon }}</div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 成功状态星光效果 -->
    <div v-if="isSuccess" class="starlight-effect">
      <div v-for="n in 50" :key="n" class="star" :style="getStarStyle(n)"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/userController'
import { useLoginUserStore } from '@/stores/loginUser'

const router = useRouter()
const loginUserStore = useLoginUserStore()
const loading = ref(false)
const rememberMe = ref(false)
const focusedField = ref('')
const showEncryption = ref(false)
const isSuccess = ref(false)
const isTyping = ref(false)
const currentDialogue = ref('欢迎来到AI代码平台！我是您的智能编程助手。')

// 粒子系统
const particleCanvas = ref<HTMLCanvasElement>()
let particleSystem: any = null

// AI助手对话
const dialogues = [
  '欢迎来到AI代码平台！我是您的智能编程助手。',
  '我可以帮您生成代码、调试程序、优化算法...',
  '准备好开启您的AI编程之旅了吗？',
  '让我们一起创造令人惊叹的代码吧！'
]

// 功能展示
const features = [
  {
    id: 1,
    icon: '🚀',
    title: '快速上手',
    description: '一键注册，立即体验'
  },
  {
    id: 2,
    icon: '🔒',
    title: '安全可靠',
    description: '企业级安全保障'
  },
  {
    id: 3,
    icon: '🎯',
    title: '个性化',
    description: '专属AI编程助手'
  },
  {
    id: 4,
    icon: '☁️',
    title: '云端部署',
    description: '一键部署云端'
  }
]

const formState = reactive<API.UserLoginDTO>({
  userAccount: '',
  userPassword: '',
})

const rules = {
  userAccount: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, message: '账号长度不能少于4个字符', trigger: 'blur' },
  ],
  userPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' },
  ],
}

// 方法
const handleFocus = (field: string) => {
  focusedField.value = field
}

const handleBlur = () => {
  setTimeout(() => {
    focusedField.value = ''
  }, 200)
}

const showEncryptionAnimation = () => {
  showEncryption.value = true
  setTimeout(() => {
    showEncryption.value = false
  }, 1000)
}

const socialLogin = (provider: string) => {
  console.log(`使用 ${provider} 登录`)
  message.info(`${provider} 登录功能开发中...`)
}

const getStarStyle = (index: number) => {
  const angle = (index * 137.5) % 360
  const radius = 50 + (index % 3) * 100
  const x = Math.cos(angle * Math.PI / 180) * radius
  const y = Math.sin(angle * Math.PI / 180) * radius
  
  return {
    left: `calc(50% + ${x}px)`,
    top: `calc(50% + ${y}px)`,
    animationDelay: `${index * 0.1}s`
  }
}

const onFinish = async (values: API.UserLoginDTO) => {
  try {
    loading.value = true
    const res = await login(values)
    if (res.data.code === 200 && res.data.data) {
      message.success('登录成功')
      loginUserStore.setLoginUser(res.data.data)
      
      // 存储用户登录状态
      if (rememberMe.value) {
        localStorage.setItem('token', res.data.data.id?.toString() || '')
      } else {
        sessionStorage.setItem('token', res.data.data.id?.toString() || '')
      }
      
      // 显示成功动画
      isSuccess.value = true
      
      // 星光效果后跳转
      setTimeout(() => {
        router.push('/')
      }, 2000)
    } else {
      message.error(res.data.message || '登录失败，请重试')
    }
  } catch (error) {
    console.error('登录出错：', error)
    message.error('登录失败，请检查网络后重试')
  } finally {
    loading.value = false
  }
}

// 粒子系统初始化
const initParticleSystem = () => {
  const canvas = particleCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  
  const particles: any[] = []
  const codeSnippets = [
    'function AI() {',
    'const code = generate();',
    'if (smart) {',
    'return optimize();',
    '}',
    'class Neural {',
    'async learn() {',
    'console.log("AI");',
    'import { brain }',
    'export default AI;'
  ]
  
  // 创建粒子
  for (let i = 0; i < 50; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.5,
      vy: (Math.random() - 0.5) * 0.5,
      text: codeSnippets[Math.floor(Math.random() * codeSnippets.length)],
      opacity: Math.random() * 0.5 + 0.2,
      size: Math.random() * 12 + 8
    })
  }
  
  const animate = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    particles.forEach(particle => {
      particle.x += particle.vx
      particle.y += particle.vy
      
      if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1
      if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1
      
      ctx.save()
      ctx.globalAlpha = particle.opacity
      ctx.fillStyle = '#9d4edd'
      ctx.font = `${particle.size}px 'Fira Code', monospace`
      ctx.fillText(particle.text, particle.x, particle.y)
      ctx.restore()
    })
    
    requestAnimationFrame(animate)
  }
  
  animate()
  particleSystem = { particles, animate }
}

// AI助手对话循环
const startDialogueLoop = () => {
  let currentIndex = 0
  
  const nextDialogue = () => {
    isTyping.value = true
    
    setTimeout(() => {
      currentDialogue.value = dialogues[currentIndex]
      isTyping.value = false
      currentIndex = (currentIndex + 1) % dialogues.length
    }, 1500)
  }
  
  setInterval(nextDialogue, 4000)
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    initParticleSystem()
    startDialogueLoop()
  })
  
  // 窗口大小变化时重新初始化粒子系统
  window.addEventListener('resize', () => {
    if (particleCanvas.value) {
      particleCanvas.value.width = window.innerWidth
      particleCanvas.value.height = window.innerHeight
    }
  })
})

onUnmounted(() => {
  if (particleSystem) {
    particleSystem = null
  }
})
</script>

<style scoped>
/* 引入所有样式 - 与之前的UserAuth.vue相同的样式 */
.auth-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #0d1b2a 100%);
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.particle-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.particle-canvas {
  width: 100%;
  height: 100%;
}

.auth-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100vh;
  backdrop-filter: blur(10px);
}

.form-section {
  flex: 1;
  max-width: 500px;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(13, 27, 42, 0.8);
  border-right: 1px solid rgba(157, 78, 221, 0.2);
  overflow-y: auto;
}

.brand-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.ai-logo {
  width: 60px;
  height: 60px;
  margin: 0 auto 0.75rem;
  transition: transform 0.3s ease;
}

.ai-logo.nodding {
  animation: nod 0.6s ease-in-out;
}

@keyframes nod {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.neural-network-icon {
  width: 100%;
  height: 100%;
}

.node {
  fill: #43aa8b;
  stroke: #9d4edd;
  stroke-width: 1;
  animation: pulse 2s infinite;
}

.connection {
  stroke: #9d4edd;
  stroke-width: 1;
  opacity: 0.6;
  animation: flow 3s infinite;
}

@keyframes pulse {
  0%, 100% { r: 3; opacity: 1; }
  50% { r: 5; opacity: 0.7; }
}

@keyframes flow {
  0% { stroke-dasharray: 0, 100; }
  50% { stroke-dasharray: 50, 50; }
  100% { stroke-dasharray: 100, 0; }
}

.brand-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
  background: linear-gradient(135deg, #43aa8b, #9d4edd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-subtitle {
  color: #94a3b8;
  font-size: 0.8rem;
  margin: 0;
}

.auth-form {
  transition: all 0.5s ease;
}

.auth-form.dissolving {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(5px);
}

.input-wrapper {
  position: relative;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.5);
  border: 2px solid rgba(157, 78, 221, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}

.input-wrapper.focused {
  border-color: #9d4edd;
  box-shadow: 0 0 20px rgba(157, 78, 221, 0.3);
  transform: translateY(-2px);
}

.form-input {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 1rem;
  padding: 16px 20px !important;
}

.form-input::placeholder {
  color: #64748b !important;
}

/* Ant Design 输入框样式覆盖 */
:deep(.ant-input) {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 1rem;
  padding: 16px 20px !important;
  box-shadow: none !important;
}

:deep(.ant-input::placeholder) {
  color: #64748b !important;
}

:deep(.ant-input-password) {
  background: transparent !important;
  border: none !important;
}

:deep(.ant-input-password .ant-input) {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

:deep(.ant-input-affix-wrapper) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.ant-form-item-label > label) {
  color: #94a3b8 !important;
  font-weight: 500;
  font-size: 0.85rem !important;
}

:deep(.ant-form-item) {
  margin-bottom: 18px !important;
}

:deep(.ant-form-item-label) {
  padding-bottom: 4px !important;
}

.hologram-keyboard {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 20px;
  background: linear-gradient(90deg, transparent, #9d4edd, transparent);
  opacity: 0.6;
  animation: hologram 2s infinite;
}

@keyframes hologram {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scaleX(0.8); }
  50% { opacity: 0.8; transform: translateX(-50%) scaleX(1.2); }
}

.encryption-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(157, 78, 221, 0.1) 0%, transparent 70%);
  animation: encrypt 1.5s infinite;
}

@keyframes encrypt {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.9rem;
}

.hidden-checkbox {
  display: none;
}

.brain-icon {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(157, 78, 221, 0.5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.brain-icon.active {
  background: #9d4edd;
  border-color: #9d4edd;
}

.brain-icon svg {
  width: 12px;
  height: 12px;
  fill: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.brain-icon.active svg {
  opacity: 1;
}

.forgot-password {
  color: #9d4edd;
  text-decoration: none;
  font-size: 0.9rem;
  position: relative;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #43aa8b;
}

.encryption-animation {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid #9d4edd;
  border-radius: 4px;
  animation: encryptBorder 1s infinite;
}

@keyframes encryptBorder {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #9d4edd, #43aa8b);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-btn.loading {
  background: linear-gradient(135deg, #64748b, #475569);
}

.btn-text {
  transition: all 0.3s ease;
}

.quantum-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.quantum-ring {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: quantumSpin 1s linear infinite;
}

.quantum-ring:nth-child(2) {
  animation-delay: 0.2s;
}

.quantum-ring:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes quantumSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

.loading-text {
  font-size: 0.9rem;
  opacity: 0.8;
}

.social-login {
  margin-top: 2rem;
}

.divider {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157, 78, 221, 0.3), transparent);
}

.divider span {
  background: rgba(13, 27, 42, 0.9);
  padding: 0 1rem;
  color: #64748b;
  font-size: 0.8rem;
}

.social-buttons {
  display: flex;
  gap: 12px;
}

.social-btn {
  flex: 1;
  padding: 12px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(157, 78, 221, 0.2);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem;
}

.social-btn:hover {
  transform: translateY(-2px);
  border-color: #9d4edd;
  box-shadow: 0 5px 15px rgba(157, 78, 221, 0.2);
}

.social-btn svg {
  width: 18px;
  height: 18px;
}

.social-btn.github:hover {
  background: rgba(36, 41, 46, 0.8);
}

.social-btn.google:hover {
  background: rgba(66, 133, 244, 0.1);
}

.social-btn.openai:hover {
  background: rgba(16, 163, 127, 0.1);
}

.register-link {
  text-align: center;
  margin-top: 16px;
  color: #94a3b8;
}

.register-link a {
  color: #9d4edd;
  text-decoration: none;
}

.register-link a:hover {
  color: #43aa8b;
}

.demo-section {
  flex: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(27, 38, 59, 0.3);
}

.ai-assistant {
  text-align: center;
  margin-bottom: 3rem;
}

.assistant-avatar {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
}

.avatar-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(157, 78, 221, 0.3), transparent);
  border-radius: 50%;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.1); opacity: 0.8; }
}

.avatar-core {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: linear-gradient(135deg, #9d4edd, #43aa8b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-core::before {
  content: '🤖';
  font-size: 2rem;
}

.pulse-rings {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid rgba(157, 78, 221, 0.3);
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
}

.pulse-ring:nth-child(2) {
  animation-delay: 0.7s;
}

.pulse-ring:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.dialogue-bubble {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(157, 78, 221, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 300px;
  margin: 0 auto;
  position: relative;
  backdrop-filter: blur(10px);
}

.dialogue-bubble::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(30, 41, 59, 0.8);
}

.dialogue-bubble p {
  color: #ffffff;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.typing-indicator {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 1rem;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  background: #9d4edd;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

.feature-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 500px;
}

.feature-item {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(157, 78, 221, 0.2);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
  border-color: #9d4edd;
  box-shadow: 0 10px 30px rgba(157, 78, 221, 0.2);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.feature-item h3 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.feature-item p {
  color: #94a3b8;
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.4;
}

.starlight-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #43aa8b;
  border-radius: 50%;
  animation: starfly 2s ease-out forwards;
}

@keyframes starfly {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg) translate(100px, -100px);
  }
}

@media (max-width: 768px) {
  .auth-content {
    flex-direction: column;
  }
  
  .form-section {
    max-width: none;
    border-right: none;
    border-bottom: 1px solid rgba(157, 78, 221, 0.2);
  }
  
  .demo-section {
    padding: 1rem;
  }
  
  .feature-showcase {
    grid-template-columns: 1fr;
  }
  
  .social-buttons {
    flex-direction: column;
  }
  
  .brand-title {
    font-size: 1.5rem;
  }
  
  .assistant-avatar {
    width: 80px;
    height: 80px;
  }
  
  .avatar-core::before {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .form-section {
    padding: 1rem;
  }
  
  .form-options {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}
</style>
